<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <venus-form
        :venus-form-items="venusFormItems.queryFormItems"
        :parms-value="parmsValue.queryParmsValue"
        :form="form.queryForm"
      />
    </el-header>
    <!--查询条件结束-->

    <!--列表开始-->
    <el-main>
      <el-table
        :data="table.portfolio.tableData"
        :tree-props="{ children:'children', hasChildren:'is_node' }"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="rowData.port_code" label="投组代码" sortable width="180" />
        <el-table-column label="操作" fixed="left" width="320">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.rowData.is_node === 1"
              @click="addPortFolioDialog(scope.row)"
            >新增投组
            </el-button>
            <el-button type="text" size="small" @click="updatePortFolioDialog(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deletePortFolio(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="rowData.port_name" label="投组名称" sortable width="180" />
      </el-table>
    </el-main>
    <!--列表结束-->
  </el-container>
</template>

<script>
  import { formFuncs, formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'

  export default {
    data() {
      return {
        dict: {
          is_node: [{ value: 1, label: '组合' }, { value: 2, label: '节点' }]
        },
        table: {
          portfolio: { tableData: [], limit: 5, exeid: 'M8212EQ004', total: 0, nowPage: 1 }
        },
        form: {
          // 查询表单
          queryForm: {
            labelWidth: 0,
            button: [
              { name: '查询', type: 'success', click: params => this.loadTable(params.port_code, params.port_name) },
              {
                name: '重置', type: 'reset', click: () => {
                  // eslint-disable-next-line no-return-assign
                  Object.keys(this.parmsValue.queryParmsValue).forEach(key => this.parmsValue.queryParmsValue[key] = '')
                }
              }
            ]
          },
          // 改表单
          modifyForm: {
            labelWidth: 0,
            button: [{ name: '提交', type: 'success', click: row => this.updatePortFolio(row) }]
          },
          //
          addForm: {
            labelWidth: 0,
            button: [{ name: '提交', type: 'success', click: row => this.addPortFolio(row) }]
          }
        },
        parmsValue: {
          queryParmsValue: { port_code: '', port_name: '' },
          // 增删改字段值
          modifyParmsValue: {
            port_name: '',
            port_code: '',
            currentCode: '',
            is_node: '0',
            port_level: 1,
            id: '',
            parent_id: ''
          }
        },
        venusFormItems: {
          // 查询表单字段
          queryFormItems: [formItems.portName, formItems.portCode2],
          // 增删改字段
          modifyFormItems: [
            formFuncs.withProperty(formItems.portCode2, formItems.REQUIRE, formItems.DISABLE),
            formFuncs.withProperty(formItems.portName, formItems.REQUIRE),
            formFuncs.withProperty(formItems.isNode, formItems.REQUIRE)
          ],
          addFormItems: [
            formFuncs.withProperty(formItems.portName, formItems.REQUIRE),
            formFuncs.withProperty(formItems.isNode, formItems.REQUIRE)
          ]
        }
      }
    },
    // 生命周期开始
    beforeMount() {
      this.loadTable()
    },
    // 生命周期结束

    methods: {
      /**
       * 加载表格数据
       */
      loadTable(portCode, portName) {
        kk.k_load_url(formItems.PUBLIC, '/base/comn-query-tree.json', {
          exeid: 'M8212EQ004',
          port_code: portCode,
          port_name: portName
        }).then(resp => {
          this.table.portfolio.tableData = resp
        })
      },

      /**
       * 新增投组-弹窗
       */
      addPortFolioDialog(row) {
        this.parmsValue.addParmsValue = {
          parent_id: row.rowData.parent_id,
          id: row.rowData.id,
          port_level: row.rowData.port_level
        }

        this.DialogForm({
          title: '新增投组',
          form: this.form.addForm,
          parmsValue: this.parmsValue.addParmsValue,
          venusFormItems: this.venusFormItems.addFormItems,
          formItemdData: this.dict,
          isValied: true
        })
      },

      /**
       * 新增投组
       */
      addPortFolio(row) {
        row.parent_id = row.id
        kk.k_update_exeid(formItems.PUBLIC, 'M8212ES001', row).then(resp => {
          if (resp.success) {
            this.loadTable()
          }
        })
      },

      /**
       * 删除投组
       */
      deletePortFolio(row) {
        this.$confirm('确认删除投组吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          kk.k_update_exeid(formItems.PUBLIC, 'M8212ED001', row).then(resp => {
            if (resp.success) {
              this.loadTable()
            }
          })
        }).catch(() => {})
      },

      /**
       * 更新投组
       */
      updatePortFolio(row) {
        kk.k_update_exeid(formItems.PUBLIC, 'M8212EU001', row).then(resp => {
          if (resp.success) {
            this.loadTable()
          }
        })
      },

      /**
       * 更新投组-弹窗
       */
      updatePortFolioDialog(row) {
        this.parmsValue.modifyParmsValue = row.rowData
        this.DialogForm({
          title: '修改投组',
          form: this.form.modifyForm,
          parmsValue: this.parmsValue.modifyParmsValue,
          venusFormItems: this.venusFormItems.modifyFormItems,
          formItemdData: this.dict,
          isValied: true
        })
      }
    }
  }
</script>
